<template>
  <div>
    <div class="home_nav_banner">
      <div class="search" @click="$router.push('/search')">天使纪元(送无限充值)</div>
      <img src="../../../assets/img/home/ic_kefu.png" alt="" @click="$router.push('/custom_center')"/>
    </div>
    <div class="banner">
      <van-swipe
        class="swiper"
        :autoplay="3000"
        indicator-color="#ff5543"
        :stop-propagation="false"
        touchable
      >
        <van-swipe-item
          v-for="(item, index) in banners"
          :key="index"
          class="swiper-slide"
        >
          <img :src="item.pic" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  props: {
    banners: {
      type: Array,
      default() {
        return []
      }
    },
  },
  data() {
    return {
      // banners: [
      //   "https://p1.277sy.com/2021/07/21/60f7cff1832da.png",
      //   "https://p1.277sy.com/2021/07/15/60ef8e3a7f684.jpg",
      //   "https://p1.277sy.com/2021/07/12/60ec1164917cc.jpg",
      //   "https://p1.277sy.com/2021/05/13/609c98023687e.jpg",
      //   "https://p1.277sy.com/2021/06/04/60b9812943b2a.jpg",
      //   "https://p1.277sy.com/2021/06/16/60c9703b009f7.jpg",
      //   "https://p1.277sy.com/2021/07/02/60de72ff7cf82.jpg",
      //   "https://p1.277sy.com/2021/06/11/60c3194a541b4.jpg",
      //   "https://p1.277sy.com/2021/03/04/6040354e5b8f7.jpg",
      // ],
    };
  },
};
</script>

<style lang="less" scoped>
.home_nav_banner {
  box-sizing: border-box;
  padding: 0.266667rem 0.426667rem 0;
  width: 100%;
  height: 2.853333rem;
  background: linear-gradient(360deg, #dd6c5b, #e38b50);
  display: flex;
  justify-content: space-between;
  .search {
    position: relative;
    box-sizing: border-box;
    width: 8.053333rem;
    height: 0.826667rem;
    background: #fff;
    border-radius: 0.4rem;
    font-size: 0.293333rem;
    font-weight: 400;
    color: #ccc;
    line-height: 0.826667rem;
    padding-left: 0.8rem;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0.266667rem;
      width: 0.32rem;
      height: 0.32rem;
      background: url("../../../assets/img/home/ic_search.png") no-repeat;
      background-size: 0.32rem 0.32rem;
    }
  }
  img {
    margin-top: 0.08rem;
    width: 0.613333rem;
    height: 0.613333rem;
  }
}

.banner {
  position: absolute;
  transform: translateY(-1.493333rem);
  width: 10rem;
  height: 4.346667rem;
  overflow: hidden;
  // background-color: rgba(255, 217, 0, 0.3);
  .swiper {
    width: 10rem;
    height: 4.346667rem;
    .swiper-slide {
      width: 8.933333rem;
      height: 4.346667rem;
      img {
        display: block;
        margin-left: 0.533333rem;
        border-radius: 0.4rem;
        overflow: hidden;
        width: 8.933333rem;
        height: 4.346667rem;
      }
    }
  }
}

.box {
  width: 10rem;
  height: 2.853333rem;
}
</style>